import {FC} from "react"
type Icomment = {
    date:string;
    text:string;
    author:{
    	name:string;
    	avatarUrl:string
	}
}

// 将类型变成可选，定义props
type Iprops<T> = {
    [k in keyof T]?: T[k]
}

const comment:Icomment = {
    date: new Date().toLocaleTimeString(),
    text: '我希望你能愉快的学习react',
    author: {
      name: 'Hello Kitty',
      avatarUrl: 'http://placekitten.com/g/64/64'
    }
  };

// 1.提取Avatar组件
type authorProps = {
    author:{
        name:string;
        avatarUrl:string;
    }
}
let Avatar:FC<authorProps> = (props) => {
    return(
        <img className="Avatar"
            src={props.author?.avatarUrl}
            alt={props.author!.name}
        />
    )
}

// 2.提取UserInfo组件
let UserInfo:FC<authorProps> = (props) => {
    return(
        <div className="UserInfo">
            {/* avatar组件 */}
            <Avatar author={props.author!}/>
            <div className="UserInfo-name">
            {props.author?.name}
            </div>
        </div>
    )
}

let Comment:FC<Iprops<Icomment>> = (props) => {
    return (
        <div className="Comment">
        <UserInfo author={props.author!}/>
        <div className="Comment-text">  b
            {props.text} 
        </div>
        <div className="Comment-date">
            {props.date}
        </div>
        </div>
    );
}

Comment.defaultProps = comment

export default Comment